<!DOCTYPE html>
<html lang="" class="loading">
<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate">
    
    
    <meta name="author" content="艾尔蓝德"> 
    
    <link rel="icon" type="image/x-icon" href="/img/favicon.png"> 
    <link rel="stylesheet" href="/css/diaspora.css">
</head>

<body class="loading">
  <div class="nav">
    <ul id="menu-menu" class="menu">
        
        <li class="pview menu-item menu-item-type-post_type menu-item-object-page">
            <a href="/about/" title="简介">简介</a>
        </li>
        
        <li class="pview menu-item menu-item-type-post_type menu-item-object-page">
            <a href="/taglist/" title="分类">分类</a>
        </li>
        
        <li class="pview menu-item menu-item-type-post_type menu-item-object-page">
            <a href="/demo/" title="Demo">Demo</a>
        </li>
        
    </ul>
  <ul class="menu menu-git">
    <li><a href="https://github.com/leitingx762" target="_blank">github</a></li>
    <li><a href="https://gitee.com/airgoo" target="_blank">gitee</a></li>
    <li><a href="https://weibo.com/u/2100563617" target="_blank">微博</a></li>
  </ul>
    <p id="copyright">
        &copy; 2019 艾尔的小窝，
        Powerd By：<a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a>
    </p>
</div>
<div id="header">
  <div>
    <a class="image-logo" href="/"></a>
    <div class="icon-menu switchmenu"></div>
  </div>
</div>

  <div id="top" style="display: block;">
<audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src>
            </audio>
            
                <ul id="audio-list" style="display:none">
                    
                        <li title="0" data-url="http://link.hhtjim.com/163/5146554.mp3"></li>
                    
                        <li title="1" data-url="http://link.hhtjim.com/qq/001faIUs4M2zna.mp3"></li>
                    
                </ul>
            
    <div class="bar" style="width: 0;"></div>
    <a class="icon-left image-icon" href="javascript:history.go(-1)" data-url></a>
    <a class="icon-home image-icon" href="/"></a>
    <div title="播放/暂停" class="icon-play"></div>
    <h3 class="subtitle">Babel-7：《初识》</h3>
    <div class="social">
        <!--<div class="like-icon">-->
            <!--<a href="javascript:;" class="likeThis active"><span class="icon-like"></span><span class="count">76</span></a>-->
        <!--</div>-->
        <div>
            <div class="share">
                <a title="获取二维码" class="icon-scan" href="javascript:;">艾尔&nbsp;</a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
    <div class="scrollbar-mask"></div>
</div>

  <span id="config-title" style="display:none">艾尔的小窝</span>
  <div id="loader"></div>
  <div id="single">
    <div id="top" style="display: block;">
<audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src>
            </audio>
            
                <ul id="audio-list" style="display:none">
                    
                        <li title="0" data-url="http://link.hhtjim.com/163/5146554.mp3"></li>
                    
                        <li title="1" data-url="http://link.hhtjim.com/qq/001faIUs4M2zna.mp3"></li>
                    
                </ul>
            
    <div class="bar" style="width: 0;"></div>
    <a class="icon-left image-icon" href="javascript:history.go(-1)" data-url></a>
    <a class="icon-home image-icon" href="/"></a>
    <div title="播放/暂停" class="icon-play"></div>
    <h3 class="subtitle">Babel-7：《初识》</h3>
    <div class="social">
        <!--<div class="like-icon">-->
            <!--<a href="javascript:;" class="likeThis active"><span class="icon-like"></span><span class="count">76</span></a>-->
        <!--</div>-->
        <div>
            <div class="share">
                <a title="获取二维码" class="icon-scan" href="javascript:;">艾尔&nbsp;</a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
    <div class="scrollbar-mask"></div>
</div>

    <div class="section">
        <div>
<div class="article">
    <div class="main">
        <h1 class="title">Babel-7：《初识》</h1>
        <div class="stuff">
            <span>3月 10, 2019</span>
            
  <ul class="post-tags-list"><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/Babel-7/">Babel-7</a></li><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/学习/">学习</a></li><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/萌新的自我修养/">萌新的自我修养</a></li></ul>


        </div>
        <div class="content markdown">
            <h1 id="巴别塔"><a href="#巴别塔" class="headerlink" title="巴别塔"></a>巴别塔</h1><p> 从前，人类只有一种语言，有一天，他们决定建造一座能通天的高塔。<br> 上帝为了阻止人类的计划，分化了人类，让他们说不同的语言。<br> 由于互相之间无法交流，计划失败了，人类四散而去。<br> <img src="./Babel-7-初识/babel.jpg" alt="babel"><br>转眼到了现在，JS版本号跑的飞起，以至于这边还是es5那边已经es6，甚至边上还站着一个es3( IE8别跑说的就是你 )! <img src="./Babel-7-初识/头发-1.gif" alt="掉头发"><br>这活没法干啊？语言都不通！</p>
<p><strong>于是，Babel 应运而生</strong><br><img src="./Babel-7-初识/babel-logo.jpg" alt="babel"></p>
<p>我们只需要敲代码，翻译这种活就交给它吧，早期时候，Babel主要做版本翻译，也就是es6转es5/es3之类的。到现在，浏览器兼容也可以交给它了<br>虽然掉的头发是不可能长出来了，但是以后可以少掉几根头发o(￣▽￣)d~</p>
<h1 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h1><p><strong>本文基于Babel V7.x 和浏览器环境</strong></p>
<p>首先，Babel是一个编译转码工具，可以将es6/7/8等比较新的语法（ 箭头函数 ），属性( Set,Class )转化成在旧版浏览器上也能运行的代码。<br>主体有两个：</p>
<ul>
<li>@babel/core</li>
<li>@babel/cli</li>
</ul>
<p>顾名思义：<strong>@babel/core</strong> 是babel的本体，<strong>@babel/cli</strong> 是命令行工具（从Babel 7 开始，命名风格改为 <strong>@babel/xxx</strong> 了），大部分的命令都抽到 <strong>@babel/cli</strong> 里面了。<br>So 先来全局安装一下<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -g @babel/core @babel/cli</span><br></pre></td></tr></table></figure></p>
<p>为啥要全局呢？为了方便使用命令呗~你总不想每次都加上一长串的path吧？这样不优雅。<br>牺牲一点硬盘空间来换取便利吧&lt;(￣︶￣)&gt;<br>当然。。安装到项目目录然后 <code>npx babel</code> xxxx也是可以滴~</p>
<p>然后在项目里再安装一遍<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd <span class="string">"Your project path"</span></span><br><span class="line">npm i -D @babel/core @babel/cli</span><br></pre></td></tr></table></figure></p>
<h1 id="预设配置"><a href="#预设配置" class="headerlink" title="预设配置"></a>预设配置</h1><p>好了，可以开始撸配置了~<br>可选模式</p>
<ul>
<li><p><code>.babelrc</code><br> 可以用模板+变量的方式生成适用于不同环境的babel配置，你只需要把环境参数传进去就OK了~一套模板，多处复用。优雅~<img src="./Babel-7-初识/好感+1.jpg" alt="好感+1"></p>
</li>
<li><p><code>babel.config.js</code><br> 不支持变量，适用于简单项目与静态配置。<img src="./Babel-7-初识/头发-1.gif" alt="掉头发"><br>当然,你也可以写在<code>package.json</code> 的<code>&quot;babel&quot;</code>键里。<br>Babel 7 官方推荐使用<code>babel.config.js</code>，默认使用项目路径下的<code>&quot;babel.config.js&quot;</code>作为配置文件。</p>
</li>
</ul>
<p>好~先去Babel的<a href="https://github.com/babel/babel/blob/master/babel.config.js" target="_blank" rel="noopener">GayHub</a>撸一个配置文件模板来研究下吧~</p>
<p>鉴于官方配置略长，我简化了一下<code>babel.config.js</code><br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    presets: [</span><br><span class="line">        [</span><br><span class="line">            <span class="string">"@babel/preset-env"</span>,</span><br><span class="line">            &#123;</span><br><span class="line">                targets: &#123;</span><br><span class="line">                    <span class="comment">//转化的目标环境</span></span><br><span class="line">                    browserslist: [<span class="string">"last 2versions"</span>,<span class="string">"&gt;5%"</span>]</span><br><span class="line">                &#125;,</span><br><span class="line">                <span class="comment">//模块转化，比如转成commonjs</span></span><br><span class="line">                modules: <span class="literal">false</span>,</span><br><span class="line">                <span class="comment">// 自动按需加载（配合模块化来使用polyfill）</span></span><br><span class="line">                useBuiltIns: <span class="string">"usage"</span>,</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    ],</span><br><span class="line">    plugins: []</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>484好看很多鸭~<br>然后就可以愉快的<br><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">单文件：</span><br><span class="line">$ babel you.js -o new-you.js</span><br><span class="line"></span><br><span class="line">文件夹：</span><br><span class="line">$ babel ./src -d ./dist</span><br><span class="line"></span><br><span class="line">构建工具：</span><br><span class="line">$ webpack -w</span><br></pre></td></tr></table></figure></p>
<p>在解释配置之前，可以先看看都有些什么包<a href="https://github.com/babel/babel/tree/master/packages" target="_blank">官方packages</a><br>虽然看起来很多(实际也很多)<img src="./Babel-7-初识/呆住.jpg" alt="呆住">，但是呢。不要方~小伙叽，仔细看他的命名 你就会发现，除开<code>babel-cli</code>,<code>babel-core</code>,<code>babel-generator</code>这类主要包，剩下的也就是3种</p>
<ul>
<li><code>babel-helper-xxx</code></li>
<li><code>babel-plugin-xxx</code></li>
<li><code>babel-preset-xxx</code><br>按照命名来看，主要分为这三大来<h2 id="helper"><a href="#helper" class="headerlink" title="helper"></a>helper</h2>这类主要是编写具体转义规则的时候用到的(因为没有用过所以一笔带过。。)</li>
</ul>
<h2 id="plugin"><a href="#plugin" class="headerlink" title="plugin"></a>plugin</h2><p>plugin,babel的核心转译模块，包括</p>
<ul>
<li>转译语法的 babel-plugin-syntax-xxx(TS,jsx等)</li>
<li>代替stage-x的 babel-plugin-proposal-xxx(async await等)</li>
<li>针对性转换的 babel-plugin-transform-xxx(react支持，cmd/amd模块支持等)</li>
</ul>
<p>总之，概括一下：plugin就是Babeld 转译模块啦，<br>比如你写了个 Class ,那你需要载入<code>@babel/plugin-proposal-class-properties</code>,<br>你还用了箭头函数？那你需要一个<code>@babel/plugin-transform-arrow-functions</code>,<br>啥？你又用了async函数？那再加个<code>@babel/plugin-syntax-async-generators</code>吧。。。</p>
<p>那么问题来了。。。</p>
<p><del>爱过！ 蓝翔！</del><br>咳咳。。。当我们撸完项目的时候，用了哪些就要在配置文件的<code>plugin</code>数组内加入相应的插件，<br>于是呼，plugin连起来就能绕地球一圈辣。。。。<br>再见！(<del>本文完</del>)</p>
<p> <img src="./Babel-7-初识/且慢.jpg" alt="且慢"></p>
<p>根本没人这么用好吗！于是，第三种包登场</p>
<h2 id="preset"><a href="#preset" class="headerlink" title="preset"></a>preset</h2><p>preset，翻译过来就是预设，一听就明白了~<br>官方让我们能愉快的使用Babel,不需要一条条引入plugin，给我们打包了一些预设参数,拿来就能用~<br>先看看有哪些能用的。<br><img src="./Babel-7-初识/preset.png" alt="preset"><br>基本上的应该都不需要解释了吧~常规使用推荐<code>@babel/preset-env</code>，也就是上面config用的那个<br>解释下 stage-0 ~ stage-3 。这几个呢，代表es的提案进程，0是最新的，也就是那些实验性功能，同时包括了1-3，如果用了这个包。。那基本上Babel就不会帮你转太多东西了。。stage-3,则是已经基本完成，接下来需要收集实现和使用者的反馈才能进一步发展的。而现在嘛。。<br>注意！！！！<strong>babel 7打算弃用所有 stage-x</strong><br>也就是上面说的<code>@babel/plugin-proposal-xxx</code>这些就是代替之前的stage-x的转译包啦~</p>
<h3 id="options"><a href="#options" class="headerlink" title="options"></a>options</h3><p>你可能注意到在Preset里写了<code>targets</code>，<code>modules</code>，<code>useBuiltIns</code>等option参数。<br>这玩意是为了制定需要转译的目标环境，避免做太多兼容处理导致转译后的文件太大。比如现在用的<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    presets: [</span><br><span class="line">        [</span><br><span class="line">            <span class="string">"@babel/preset-env"</span>,</span><br><span class="line">            &#123;</span><br><span class="line">                targets: &#123;<span class="attr">browserslist</span>: [<span class="string">"last 2versions"</span>,<span class="string">"&gt;5%"</span>]&#125;,</span><br><span class="line">                modules: <span class="literal">false</span>,</span><br><span class="line">                useBuiltIns: <span class="string">"usage"</span>,</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<ul>
<li><code>targets</code>制定浏览器环境为占市场份额大于 5% 的浏览器的最新两个版本。</li>
<li><code>modules</code>表示不转换模块语法</li>
<li><code>useBuiltIns</code> 为了按需加载<code>@babel/polyfill</code><br>转译的时候，如果有多个presets，加载顺序是从下往上<br>有关presets 详细信息参考<a href="https://babeljs.io/docs/en/babel-preset-env" target="_blank">官方文档</a></li>
</ul>
<p>presets只转化语法，也就是箭头函数、let、const之类，而新API比如Promise async…await之类是不转换的。这部分工作就交给了<code>@babel/polyfill</code>。<br>而<code>@babel/polyfill</code>需要import进项目中，如果不想手动引入的话，就可以使用 <code>useBuiltIns</code>来帮你引入，可选参数</p>
<ul>
<li><code>&quot;entry&quot;</code>: 整体引入</li>
<li><code>&quot;usage&quot;</code>：按需引入</li>
</ul>
<p><strong>以上是在模块化情况下使用</strong></p>
<p>也就是说。。如果没有使用模块化的话，你需要介个样子<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcss.com/babel-polyfill/7.4.0/polyfill.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><img src="./Babel-7-初识/头发-1.gif" alt="掉头发"><br>莫得办法鸭，没有模块化支持只能全部引入啦<br>好~那么可以开始撸码啦<br><img src="./Babel-7-初识/before.png" alt="before"><br>一个敲简单的demo，模块a使用了<code>Object.assign</code>,然后return了一个<code>Promise对象</code>模拟异步操作，test模块引入了这个a模块并且往body添加一个div。<br>那么，输出一下吧<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"> $ babel ./test -d ./dist</span><br><span class="line">Successfully compiled <span class="number">2</span> files <span class="keyword">with</span> Babel.</span><br></pre></td></tr></table></figure></p>
<p><img src="./Babel-7-初识/after.png" alt="after"><br>可以看到,babel自动引入了两个插件，而不是把整个polyfill都导入进来。大大节省了空间啊~<br>可惜的是没有把模块语法也转化一下，IE下面还是玩完~<br>果然这时候就应该用打包工具啊<br>那么 打包测试一下吧~<br>webpack配置<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">"path"</span>),</span><br><span class="line">    HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">"html-webpack-plugin"</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">"production"</span>, <span class="comment">// development|production</span></span><br><span class="line">    entry: &#123; <span class="comment">// 入口配置</span></span><br><span class="line">        index: <span class="string">"./test/test.js"</span></span><br><span class="line">    &#125;,</span><br><span class="line">    output: &#123; <span class="comment">// 输出配置</span></span><br><span class="line">        filename: <span class="string">"test.js"</span>, <span class="comment">// 打包输出文件名</span></span><br><span class="line">        path: path.resolve(__dirname, <span class="string">"./dist/"</span>) <span class="comment">// 打包输出路径</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123; <span class="comment">// 放置loader加载器，webpack本身只能打包commonjs规范的js文件</span></span><br><span class="line">        rules: [</span><br><span class="line">            &#123; <span class="comment">// 打包js</span></span><br><span class="line">                test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">                loader: <span class="string">"babel-loader"</span> <span class="comment">// 使用babel作为js的loade</span></span><br><span class="line">            &#125;,</span><br><span class="line">            &#123; <span class="comment">// 打包html</span></span><br><span class="line">                test: <span class="regexp">/\.html$/</span>,</span><br><span class="line">                loader: <span class="string">"html-loader"</span></span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    optimization: &#123; <span class="comment">// 自定义配置</span></span><br><span class="line">        minimize: <span class="literal">false</span> <span class="comment">//不压缩</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [ <span class="comment">// 插件，扩展功能</span></span><br><span class="line">        <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            filename: <span class="string">"index.html"</span>, <span class="comment">// 相对于output.path的路径</span></span><br><span class="line">            minify: &#123;</span><br><span class="line">                collapseWhitespace: <span class="literal">false</span> <span class="comment">// 压缩选项</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>简单注释下~详细配置请关注我之后的webpack系列文章~<br><img src="./Babel-7-初识/build.png" alt="build"><br>嘛~打包完成，生成了test.js和index.html文件~~<br>源码不到1kb，为了兼容。。打包出来的有42KB！<del>恐怖如斯！</del><br>咳咳，，也是我没有启用压缩。压缩之后的代码只有20KB大小，对比1KB的源码也是大到没边啦。。<br>然后在IE里测试一下~<br><img src="./Babel-7-初识/IE9.png" alt="build"><br><img src="./Babel-7-初识/IE8.png" alt="build"><br>可以看到 兼容到了ie9，鼓掌！！！<br>热泪盈眶啊~</p>
<h1 id="插件选项"><a href="#插件选项" class="headerlink" title="插件选项"></a>插件选项</h1><p>以下为补充：<br>上面说过Babel吧各种转译包封装成了一个个的插件模块，使用方法就是在<code>plugin</code>里面一个个引入，然后，Babel减轻了我们的负担，提供了一些叫做<code>@babel-preset-xx</code>的预设包，里面封装好了一些常用的插件。我们只需要选择预设，然后根据情况引入<code>@babel/polyfill</code>（import，或者script标签）就能愉快地撸码了。<br>对预设有兴趣的同学可以参考官方文档<a href="https://babeljs.io/docs/en/presets#creating-a-preset" target="_blank">创建预设</a><br>既然是预设，那就有需要改造的情况，这时候，<code>plugin</code>参数就派上用场辣~比如你需要用到预设里没有的插件，那直接在<code>plugin</code>里添加相应的插件就行了。</p>
<p>这里呢，重点提一下<code>@babel/plugin-transform-runtime</code>这个插件。<br>当你你引入<code>@babel/polyfill</code>的时候，会直接改变全局对象，也就是通称。。污染全局变量。<br>应用程序内使用鸭梨不大 但是用作组件开发可能就会坑了，比如你自己实现了一个Promise,然后挂载polyfill babel就会把你的Promise变成他的形状。。。。于是你的Promise就挂了。<br>这时候 你只要在<code>plugin</code>里加上<code>@babel/plugin-transform-runtime</code>这个插件 就完事大吉啦(记得在 <code>&quot;@babel/preset-env&quot;</code>预设里启用 <code>useBuiltIns: &quot;usage&quot;</code>)~<br>启用这个插件之后，Babel会以_开头把相应的API重写为局部方法，当然。。类似于<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"test"</span>.includes(<span class="string">"tes"</span>)</span><br></pre></td></tr></table></figure></p>
<p>这种挂在<code>prototype</code>上的方法是妥妥的用不了啦~~毕竟没有修改全局对象。原型上的方法是没法实现了。<br>so，这种情况下只能老老实实把<code>@babel/plugin-transform-runtime</code>撤下去了。。。。</p>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>最后，总结一下<br>配置文件<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    presets: [</span><br><span class="line">        [</span><br><span class="line">            <span class="string">"@babel/preset-env"</span>,</span><br><span class="line">            &#123;</span><br><span class="line">                targets: &#123;<span class="attr">browserslist</span>: [<span class="string">"last 2versions"</span>,<span class="string">"&gt;5%"</span>]&#125;,</span><br><span class="line">                modules: <span class="literal">false</span>,</span><br><span class="line">                useBuiltIns: <span class="string">"usage"</span>,</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    ],</span><br><span class="line">    plugin[<span class="comment">//看情况使用，无所谓修改全局对象就不需要这个</span></span><br><span class="line">        [<span class="string">"@babel/plugin-transform-runtime"</span>,&#123;<span class="string">"corejs"</span>: <span class="number">3</span>&#125;] <span class="comment">//corejs:3 是最新的 @babel/runtime-corejs3 转译包 配合使用,虽然官方文档是2，但是3已经出了，测试了一下。真香~</span></span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<ul>
<li><p>模块化 package.json</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">"devDependencies": &#123;</span><br><span class="line">    "@babel/core": "^7.3.3",</span><br><span class="line">    "@babel/cli": "^7.2.3",</span><br><span class="line">    "@babel/preset-env": "^7.3.1",</span><br><span class="line">    "@babel/polyfill": "^7.4.0",</span><br><span class="line">&#125;,</span><br><span class="line">"dependencies": &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>模块化&amp;&amp;防止全局污染</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">"devDependencies": &#123;</span><br><span class="line">    "@babel/core": "^7.3.3",</span><br><span class="line">    "@babel/cli": "^7.2.3",</span><br><span class="line">    "@babel/plugin-transform-runtime": "^7.4.0",</span><br><span class="line">    "@babel/preset-env": "^7.3.1",</span><br><span class="line">    "@babel/polyfill": "^7.4.0",</span><br><span class="line">&#125;,</span><br><span class="line">"dependencies": &#123;</span><br><span class="line">    "@babel/runtime-corejs3": "^7.4.2"</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>常规多页，未使用模块化，需手动将polyfill加入script标签<br>附CDN: <a href="https://cdn.bootcss.com/babel-polyfill/7.4.0/polyfill.min.js" target="_blank" rel="noopener">https://cdn.bootcss.com/babel-polyfill/7.4.0/polyfill.min.js</a></p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">"devDependencies": &#123;</span><br><span class="line">    "@babel/core": "^7.3.3",</span><br><span class="line">    "@babel/cli": "^7.2.3",</span><br><span class="line">    "@babel/preset-env": "^7.3.1",</span><br><span class="line">&#125;,</span><br><span class="line">"dependencies": &#123;</span><br><span class="line">    "@babel/polyfill": "^7.4.0",</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>转译<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">babel sourceFolder -D newFolder</span><br></pre></td></tr></table></figure></p>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
        </div>
        <ul id="pager" class="article">
          
            <li class="previous">
                <a href="/posts/life/微信小程序-概述.html" data-original-title>← 微信小程序：《概述》</a>
            </li>
          
          
            <li class="next">
                <a href="/posts/learn/Vue-Router-前传.html" data-original-title>Vue-Router : 《前传》  →</a>
            </li>
          
        </ul>
    </div>
    
        <div class="side">
            <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#巴别塔"><span class="toc-number">1.</span> <span class="toc-text">巴别塔</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#概念"><span class="toc-number">2.</span> <span class="toc-text">概念</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#预设配置"><span class="toc-number">3.</span> <span class="toc-text">预设配置</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#helper"><span class="toc-number">3.1.</span> <span class="toc-text">helper</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#plugin"><span class="toc-number">3.2.</span> <span class="toc-text">plugin</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#preset"><span class="toc-number">3.3.</span> <span class="toc-text">preset</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#options"><span class="toc-number">3.3.1.</span> <span class="toc-text">options</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#插件选项"><span class="toc-number">4.</span> <span class="toc-text">插件选项</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#总结"><span class="toc-number">5.</span> <span class="toc-text">总结</span></a></li></ol>
        </div>
    
</div>

  <div class="article">
    <div id="comments">
    <div id="vcomment" class="comment"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script>
    <script>
    setTimeout(function(){new Valine({
        el: '#vcomment',
        notify: 'true',
        verify: 'true',
        app_id: "E4EBrYgyq96lCpJpkLv3ocNg-9Nh9j0Va",
        app_key: "4SyMSBx4cpGeujpQBr0MhtCJ",
        placeholder: "留个言呗 (⁄ ⁄•⁄ω⁄•⁄ ⁄)",
        avatar: "mp"
      })},0)

    </script>
</div>
  </div>

</div>
    </div>
</div>

  <script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/diaspora.js"></script>
<link rel="stylesheet" href="/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/photoswipe/default-skin/default-skin.css">
<script src="/photoswipe/photoswipe.min.js"></script>
<script src="/photoswipe/photoswipe-ui-default.min.js"></script>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

</body>
</html>